<script setup>
import { ref, onMounted } from 'vue'
import { MotionComponent } from '@vueuse/motion'

import { getConfigApi, updateConfigApi } from '@/service'
import Upload from '@/components/Upload.vue'
import { validPhone } from '@/utils/valid'
import AntIcon from '@/components/AntdIcon/index.vue'
import { message } from 'ant-design-vue'

const formRef = ref()
const configInfo = ref({
  admin_user_phone: '',
  project_big_image_url: '',
  primary_color: '',
  active_color: '',
})
const rules = {
  admin_user_phone: [{ validator: validPhone, trigger: 'blur' }],
}

const upload = ({ download_url }) => {
  configInfo.value.project_big_image_url = download_url
}

const getConfigInfo = () => {
  getConfigApi().then((res) => {
    configInfo.value = res
  })
}

const setPrimary = (color, key) => {
  const { value } = color.target
  configInfo.value[key] = value
}

const submit = () => {
  formRef.value.validate().then(() => {
    const params = {
      ...configInfo.value,
    }
    console.log(params)

    updateConfigApi(params).then((res) => {
      message.success('修改成功！')
    })
  })
}
onMounted(() => {
  getConfigInfo()
})
</script>
<template>
  <div class="flex flex-col gap-5 items-start">
    <a-alert>
      <template #message>
        <span class="font-bold text-2xl">系统配置</span>
      </template>
    </a-alert>
    <a-form ref="formRef" :model="configInfo" :rules="rules" autocomplete="off">
      <MotionComponent preset="slideVisibleTop" delay="50">
        <a-form-item label="管理员手机号" name="admin_user_phone">
          <a-input v-model:value="configInfo.admin_user_phone" placeholder="请输入管理员手机号">
            <template #prefix> <AntdIcon icon="PhoneOutlined" /> </template>
          </a-input>
        </a-form-item>
      </MotionComponent>
      <MotionComponent preset="slideVisibleTop" delay="100">
        <a-form-item label="项目大图片" name="project_big_image_url">
          <div class="flex items-center gap-5">
            <a-image :width="400" :height="160" :src="configInfo.project_big_image_url" />
            <Upload @uploadSuccess="upload">
              <AntIcon class="cursor-pointer" icon="EditOutlined" />
            </Upload>
          </div>
        </a-form-item>
      </MotionComponent>
      <MotionComponent preset="slideVisibleTop" delay="100">
        <a-form-item label="客户端主色调" name="primary_color">
          <input
            type="color"
            v-model="configInfo.primary_color"
            @change="setPrimary($event, 'primary_color')"
          />
        </a-form-item>
      </MotionComponent>
      <MotionComponent preset="slideVisibleTop" delay="100">
        <a-form-item label="客户端选中色" name="active_color">
          <input
            type="color"
            v-model="configInfo.active_color"
            @change="setPrimary($event, 'active_color')"
          />
        </a-form-item>
      </MotionComponent>
      <MotionComponent preset="slideVisibleTop" delay="150">
        <a-button type="primary" @click="submit">提交</a-button>
      </MotionComponent>
    </a-form>
  </div>
</template>

<style scoped>
:deep(.ant-alert-info) {
  border-color: var(--color) !important;
}
</style>
